import React from "react";
import {Row,Col} from "antd";
import Util from '@src/utils/utils'
import "./index.less"
//import axios from '@src/axios'
import axios from '../../axios'

export default class Header extends React.Component{
    componentWillMount() {
        this.setState({
            userName: "DuebassLei"
        })
        //每隔一秒获取时间
        setInterval(()=>{
            let sysTime = Util.formateDate(new Date().getTime());
            this.setState({
                sysTime
            })
        },1000)
        this.getWeatherAPIData();
    }
    //获取百度天气接口
    getWeatherAPIData(){
        let city = '北京';
        axios.jsonp({
            // url:'http://api.map.baidu.com/telematics/v3/weather?location='+encodeURIComponent(city)+'&output=json&ak=OGVvUbcYP67SXPtXRwgB26jzwh5Fz0M8'
            url:"http://wthrcdn.etouch.cn/weather_mini?citykey=101010100"
        }).then((res)=>{
            // if(res.status == 'success'){
            //     let data = res.results[0].weather_data[0];
            //     this.setState({
            //         dayPictureUrl:data.dayPictureUrl,
            //         weather:data.weather
            //     })
            // }
            if(res.data){
                let data = res.data;
                this.setState({
                    weather: data.wendu
                })
            }

        })
    }
    render() {
        return(
            <div className="header">
                <Row className="header-top">
                    <Col span={24} >
                        <span>欢迎,{this.state.userName}</span>
                        <a href="#">退出</a>
                    </Col>
                </Row>
                <Row className="breadcrumb">
                    <Col span={4} className="breadcrumb-title">
                        首页
                    </Col>
                    <Col span={20} className="weather">
                        <span className="date">{this.state.sysTime}</span>
                        <span className="weather-img">
                                    {/*<img src={this.state.dayPictureUrl} alt="" />*/}
                                </span>
                        <span className="weather-detail">
                                    {this.state.weather}℃
                                 </span>
                    </Col>
                </Row>
            </div>
        );
    }
}